<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=no">
    <title>wgzz</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 对手区域 -->
        <div class="opponent-area">
            <div class="info-panel">
                <div>等级: <span id="opponent-level">1</span></div>
                <div>金币: <span id="opponent-gold">10</span></div>
                <div>生命值: <span id="opponent-health">30</span></div>
            </div>
            <div class="bond-panel" id="opponent-bonds"></div>
            <div class="hand" id="opponent-hand"></div>
            <h4>对手出牌区</h4>
            <div class="battle-area" id="opponent-battle"></div>
        </div>

        <!-- 玩家区域 -->
        <div class="player-area">
            <div class="info-panel">
                <div>等级: <span id="player-level">1</span></div>
                <div>金币: <span id="player-gold">30</span></div>
                <div>生命值: <span id="player-health">30</span></div>
            </div>
            <div class="main-panel">
                <div class="left-panel">
                    <div class="controls">
                        <button onclick="upgrade()">升级 (5金)</button>
                        <button onclick="refreshCards()">刷新 (2金)</button>
                    </div>
                    <div class="hand" id="player-hand"></div>
                    <div class="cards" id="available-cards"></div>
                </div>
                <div class="right-panel">
                    <div class="bond-panel" id="player-bonds"></div>
                    <h4>我的出牌区</h4>
                    <div class="battle-area" id="player-battle"></div>
                </div>
            </div>
            <div class="timer">回合: <span id="round">1</span> | 剩余时间: <span id="timer">30</span>秒</div>
        </div>
    </div>
    <script src="cardConfig.js"></script>
    <script src="script.js"></script>
</body>
</html>